<!DOCTYPE html>
<html lang="en" class="feedback">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>${page_title}</title>
		<link rel="stylesheet" href="../../css/simple-line-icons.css">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/mui-ext.css">
		
		<style>
			.head-img-bg {
				width: 72px;
				height: 72px;
				border-radius:50px; 
			}
			.head-badge{
				position: absolute;
			    top: 60px;
			    right: 10px;
			    font-size: 8px;
			    line-height: 10px;				
			}
			.head-title{
				font-size: 16px;
			}
			.head-desc{
				font-size: 10px;
			}
			.head-box{
				text-align: center;
				border-right:1px solid #eee;
			}
			.title-box{
				padding-left: 5px;
			}
			.title-icon-box{
				text-align: center;padding-left: 5px;border-right:1px solid #eee;
			}
			.title-icon-box-last{
				text-align: center;padding-left: 5px;
			}
			.title-desc {
				padding-top: 10px;
			}			
			.head-img {
				width: 36px;
				height: 36px;
				border-radius:50px; 
			}
			.head-badge{
				position: absolute;
			    top: 60px;
			    right: 10px;
			    font-size: 8px;
			    line-height: 10px;				
			}
			.head-title{
				font-size: 16px;
			}
			.head-desc{
				font-size: 10px;
			}
			.head-box{
				text-align: center;
				border-right:1px solid #eee;
			}
			.title-box{
				padding-left: 5px;
			}
			.title-icon-box{
				text-align: center;padding-left: 5px;border-right:1px solid #eee;
			}
			.title-icon-box-last{
				text-align: center;padding-left: 5px;
			}
			.title-desc {
				padding-top: 10px;
			}	
			body {
				padding: 0;
				font-family: '宋体';
				background: #fff;
			}
			
			.title {
				display: block;
				font-size: 2em;
				-webkit-margin-before: 0.67em;
				-webkit-margin-after: 0.67em;
				-webkit-margin-start: 0px;
				-webkit-margin-end: 0px;
				font-weight: bold;
				text-align: center;
			}
			
			.activity-info {
				border-top: 1px dotted #ccc;
				text-align: center;
			}
			
			.activity-meta {
				display: inline-block;
				line-height: 16px;
				vertical-align: middle;
				text-align: center;
				margin-left: 8px;
				padding-top: 2px;
				padding-bottom: 2px;
				color: #8c8c8c;
				font-size: 11px;
			}
			
			.content {
				width: 95%;
				margin: 0 auto;
				padding: 5px 5px;
			}
			
			.w-header {
				background-color: #00a8c6;
			}
			
			.bg-base {
				background-color: #00a8c6;
				color: #FFFFFF;
				font-size: 12px;
				filter: alpha(Opacity=80);
				-moz-opacity: 0.8;
				opacity: 0.8;
			}
			.bg-color-base {
				background-color: #00a8c6;
				}
			
			.btns-likes {
				position: absolute;
				left: 10px;
				top: 50px;
			}
			
			.btn-float {
				/*font-family: sans-serif;*/
			}
			
			.article-image {
				background-size: contain;
				background-repeat: no-repeat;
				min-height: 200px;
			}
			
			.flex-container {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-flow: row wrap;
				/*justify-content: space-between;*/
				text-align: center;
			}
			
			.icon-cycle {
				margin: 3px;
				width: 40px;
				height: 40px;
				display: inline-block;
				text-align: center;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				/*margin-left:20px;
				margin-right:20px;
				*/
			}
			
			.mui-content-padded a .mui-icon {
				margin-top: 0px;
			}
			
			.title-section {
				/*border-bottom: 1px dotted #ccc;*/
				padding: 15px 15px 0px 15px;
			}
			
			.label-row {
				padding: 5px;
			}
			
			.artile-body {
				padding-left: 5px;
				padding-right: 5px;
			}
			
			.artile-content-body {
				color: #000000;
			}
			.artile-comment {
				min-height: 50px;
			}
			.artile-footer{
				height: 60px;
			}
			.comment-row{
				padding-top: 5px;
			}
			.comment-content{
				font-weight: 400;
				padding-top: 15px;
			}
			.comment-author{
				font-weight: 600;
				color: #8F8F94;
				padding-right: 10px;
			}
			.comment-role{
				font-weight: 400;
				font-size: 12px;
				color: #8F8F94;
			}
			.comment-date{
				font-weight: 400;
				font-size: 12px;
				color: #8F8F94;
			}
			.icon-num-right{
				float: right;
			}
			.icon-liked{
				color: red;
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav" style="background: #00a8c6;color: #FFFFFF;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">${detail.itemOwn}的提问</h1>
		</header>-->
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content" style="padding: 10px 0px;">
					<div class="mui-row">
						<div class="mui-col-xs-4 head-box" >
							<div class="icon-cycle-large">
								<img class="head-img-bg" src="<c:if test="${empty detail.itemChar61}">/static/images/noimage.png</c:if><c:if test="${!empty detail.itemChar61}">${detail.itemChar61}</c:if>" width="72"  style="width: 72px;">
								<span class="mui-badge mui-badge-primary head-badge">${detail.itemChar62}</span>
							</div>
						</div>
						<div class="mui-col-xs-8 title-box" >
							<div class="mui-row">
				        		
								<div class="mui-col-xs-3 title-icon-box" style="line-height: 50px;padding-top: 15px;" >
									<div class=" icon-clock mui-icon-sm ">
									</div>
									<span class="btn-float mui-icon-sm ">${detail.itemChar51}</span> 
								</div>
								<div class="mui-col-xs-3 title-icon-box" id="comment-btn" style="line-height: 50px;padding-top: 15px;" >
									<div class="icon-speech  mui-icon-sm ">
									</div>
									<span class="btn-float mui-icon-sm " id="comment-count">0</span> 
								</div>
								<div class="mui-col-xs-3 title-icon-box"  id="like-btn" style="line-height: 50px;padding-top: 15px;" >
									<div class="btn-float icon-like">
									</div>
									<span class="btn-float " id="like-count">0</span> 
								</div>
								<div class="mui-col-xs-3 title-icon-box-last" id="favorite-btn" style="line-height: 50px;padding-top: 15px;" >
									<div class="btn-float icon-star ">
									</div>
									<span class="btn-float " id="favorite-count">0</span>
								</div>
							</div>
								
						</div>
					</div>	
				</div>
				<div class="mui-card-footer">
					<div class="mui-row">
						<div class="mui-col-xs-12" >
							<div class="title-desc" >
								<span>${detail.itemBody}</span>
							</div>
						</div>
					</div>
				</div>	
				<div class="mui-card-content" style="padding-bottom: 15px;color: #5E5E5E;font-size: 10px;">
					<div class="mui-row">
							<div class="icon-tag mui-icon-sm mui-col-xs-10 title-desc" style="padding-left: 15px;">
								<span>${tags[detail.itemCa]}</span>
							</div>
							<div class="mui-icon-sm mui-col-xs-2 title-desc" id="dislike">
								<span>举报</span>
							</div>
					</div>
				</div>	
			</div>
			
			<div class="mui-card" id="commentHeader">
				<div class="mui-card-content" style="padding: 10px 0px;">
					<div class="artile-comment title-section" id ="blog-section">
						
					</div>					
					<div style="height: 30px;">
						
					</div>	
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<form class="mui-input-group" style="padding: 5px;">
				<div class="mui-row">
					<div class="mui-col-xs-10">
						<input type="text" placeholder="说说..." id="blog-body">
					</div>
					<div class="mui-col-xs-2">
						<button id="add-blog-btn" type="button" class="mui-btn mui-btn-default" style="min-width:40px;top:2px;" onclick="return false;">评论</button>
					</div>
				</div>
			</form>			
		</nav>
			
		</div>
		<script src="../../js/mui.min.js"></script>
		
		<script type="text/javascript">
			mui.init();
		</script>
		<script>
		    document.getElementById('comment-btn').addEventListener('tap',function(){
		        location.hash="#commentHeader";  
		    });
		    document.getElementById('like-btn').addEventListener('tap',function(e){
		    	if(e.currentTarget.className.indexOf('icon-liked')>0){
		    		mui.toast('您已经点赞过了');
		    		return;
		    	}
		    	e.currentTarget.className =e.currentTarget.className+' icon-liked';
		    	document.getElementById("like-count").innerText =parseInt(document.getElementById("like-count").innerText)+1;
		        likeit(itemId);
		    });
		    document.getElementById('favorite-btn').addEventListener('tap',function(e){
		    	if(e.currentTarget.className.indexOf('icon-liked')>0){
		    		mui.toast('您已经收藏过了');
		    		return;
		    	}
		    	e.currentTarget.className =e.currentTarget.className+' icon-liked';
		    	document.getElementById("favorite-count").innerText =parseInt(document.getElementById("favorite-count").innerText)+1;
		        favorite(itemId);
		    });
			
			function resetCount(counts){
		    	document.getElementById("like-count").innerText =counts.like;
				document.getElementById("favorite-count").innerText =counts.favorite;
				if(counts.isliked==1){
				var likeBtn =document.getElementById('like-btn');
				likeBtn.className =likeBtn.className+' icon-liked';
				}
				if(counts.isfavorited==1){
				var favoriteBtn =document.getElementById('favorite-btn');
				favoriteBtn.className =favoriteBtn.className+' icon-liked';
				}
			}
			
			function loadCounts(id){
				mui.ajax('/rest/itemstatus/count/'+id,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},
					success:function(data){
						if(data.success==true){
							var counts =data.attributes.counts;
							resetCount(counts);
						}
						
						if(data.success==false){
							mui.toast(data.msg);
						}
					},
					error:function(xhr,type,errorThrown){
						console.log(type);
						mui.toast(type);
					}
				});							
			}
			
			function likeit(id){
				mui.ajax('/rest/itemstatus/like/'+id,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},
					success:function(data){
						if(data.success==false){
							mui.toast(data.msg);
						}
					},
					error:function(xhr,type,errorThrown){
						console.log(type);
						mui.toast(type);
					}
				});							
			}
			
			function favorite(id){
				
				mui.ajax('/rest/itemstatus/favorite/'+id,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},
					success:function(data){
						if(data.success==false){
							mui.toast(data.msg);
						}
					},
					error:function(xhr,type,errorThrown){
						console.log(type);
						mui.toast(type);
					}
				});							
			}
		</script>
	</body>
		<script>
			function initLikeBtn(id){
		    document.getElementById('like-btn-'+id).addEventListener('tap',function(e){
		    	if(e.target.className.indexOf('icon-liked')>0){
		    		mui.toast('您已经点赞过了');
		    		return;
		    	}
		    	e.target.className =e.target.className+' icon-liked';
		    	
		    	document.getElementById("like-count-"+id).innerText =parseInt(document.getElementById("like-count-"+id).innerText)+1;
		        likeit(id);

		    });
		   }
			
			function resetCountByID(id,counts){
		    	document.getElementById("like-count-"+id).innerText =counts.like;
				if(counts.isliked==1){
				var likeBtn =document.getElementById('like-btn-'+id);
				likeBtn.className ='mui-col-xs-2 mui-icon-sm icon-like icon-liked';
				}
			}
			
			function loadCountsByID(id){
				
				mui.ajax('/rest/itemstatus/count/'+id,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},
					success:function(data){
						if(data.success==true){
							var counts =data.attributes.counts;
							resetCountByID(id,counts);
						}
						
						if(data.success==false){
							mui.toast(data.msg);
						}
					},
					error:function(xhr,type,errorThrown){
					//异常处理；
						console.log(type);
						mui.toast(type);
					}
				});							
			}
			
		</script>
		<script>
			
			var itemId ='${detail.itemId}';
			
		    document.getElementById('add-blog-btn').addEventListener('tap',function(){
		        addBlog();
		    });
		    
			function addBlog(){
			    var itemblogName =document.getElementById('blog-body').value;
				var formData ={
					itemblogItem: itemId,
					itemblogName: itemblogName
				};
				mui.ajax('/rest/itemblog/add',{
					data:JSON.stringify(formData),
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},
					success:function(data){
						if(data.success==true){
							document.getElementById('blog-body').value ="";
							loadBlog(itemId);
						}else{
							if(data.msg ==1001){
								mui.openWindow({
									id: 'loginPage',
									url: '/rest/auth/login',
									show: {
										aniShow: 'fade-in',
										duration: 300
									},
									waiting: {
										autoShow: false
									}
								});
								
							}
							mui.toast(data.msg);
						}
					},
					error:function(xhr,type,errorThrown){
						console.log(type);
						mui.toast(type);
					}
				});							
			}
			
			function loadBlog(id){
				
				mui.ajax('/rest/guide/answer/'+itemId,{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},
					success:function(data){
						if(data.success==false){
							mui.toast(data.msg);
						}else{
					        var blogs =data.attributes.answers;
					        if(blogs!=null && blogs.length>0){
					        	document.getElementById("comment-count").innerText=blogs.length;
								addBlogList(blogs);
								initLikeIt(blogs);
					        }
						}
					},
					error:function(xhr,type,errorThrown){
						mui.toast(type);
					}
				});							
			}
			
			function addBlogList(list){
				var section = document.getElementById("blog-section");
		        if(list!=null){
					var childs = section.childNodes;
					for(var i = childs.length - 1; i >= 0; i--) { 
					  section.removeChild(childs[i]); 
					}
		        	
					for (var i = 0; i < list.length; i++) {
						var data =list[i];
						var htmlText =addBlogHtml(data);
						
						var div =document.createElement('div');
						div.innerHTML =htmlText;
						section.appendChild(div);
					}
	         	}
			}
			
			function addBlogHtml(data){
				var color ="";
				var userTitle ="家长";
				var imgSrc ="/static/images/noimage.png";
				if(data.itemChar61!=null){
					imgSrc =data.itemChar61;
				}
				if(data.itemChar63!=null && data.itemChar63!=""){
					userTitle =data.itemChar63;
				}
				if(data.itemUserType!=null && data.itemUserType!=""){
					userTitle =data.itemUserType;
				}
				if(data.itemChar63!=null){
					color ="mui-badge mui-badge-primary";
					if(data.itemChar63=="专家"){
						color ="mui-badge mui-badge-warning";
					}
				}
				
				var htmlText =''
				+'<div class="mui-row jimu-divider">'
				+'	<div class="mui-col-xs-2">'
				+'		<div class="icon-cycle">'
				+'			<img class="mui-media-object head-img" id="head-img" src="'+imgSrc+'" width="32">'
				+'		</div>'
				+'	</div>'
				+'	<div class="mui-col-xs-10"  style="padding-bottom:20px;">'
				+'		<div class="comment-row mui-row">'
				+'			<div class="mui-col-xs-10" >'
				+'				<span class="comment-author">'+data.itemOwn+'</span><span class="comment-role"></span>'
				+'				<span class="mui-badge mui-badge-primary">'+userTitle+'</span>'
				//+'					<h5 class="'+color+'">'+userTitle+'</h5>'
				+'			</div>'
				+'			<div class="mui-col-xs-2 icon-num-right">'
	            +'	<span id="like-btn-'+data.itemId+'" class="comment-row icon-like "></span> <span class="btn-float" id="like-count-'+data.itemId+'">0</span>'
	        	+'	</div>'
				+'		</div>'
				+'		<div class="comment-row">'
				+'			<span class="comment-date" style="float:right;">'+data.itemChar62+'</span>'
				+'		</div>'
				+'		<div class="comment-row comment-content">'
				+'			<p>'+data.itemBody+'</p>'
				+'		</div>'
				+'	</div>'
				+'</div>'
				;
				
				return htmlText;
			}
			
			function initLikeIt(list){
		        if(list!=null){
					for (var i = 0; i < list.length; i++) {
						var data =list[i];
	        			initLikeBtn(data.itemId);
	        			loadCountsByID(data.itemId);
					}
	         	}
			}
			
			// init
			loadCounts(itemId);
			loadBlog(itemId);
		</script>

</html>